import React from 'react';
import { formatMessage } from 'umi-plugin-react/locale';
import { Button, Col, Form, Input, message, Modal, Row, Select, Table, Pagination } from 'antd';
import { fetchHotTableData, fetchUserTypeList } from '@/services/hotQuestion';
import styles from '../hotSpots/hotQuestion.css';
import EditBottomModal from '../bottomLabel/editBottomModal';
import { bottomMove, bottomRemove, getBottomList } from '@/services/bottomLabel';

class BottomLabel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      loading: false,
      total: 0,
      current: 1,
      size: 10,
      userList: [],
      labelName: '',
      userTypeId: ''
    }
  }

  componentDidMount() {
    this.getUserTypeList();
    this.getTableData()
  }

  /* 获取列表数据 */
  getTableData = () => {
    this.setState({ loading: true }, async () => {
      const { current, size, labelName, userTypeId } = this.state;
      const { applicationId } = this.props;
      const res = await getBottomList({ current, size, applicationId, labelName, userTypeId })
      this.setState({
        list: res.records ? res.records : [],
        total: res.total,
        loading: false,
      })
    })
  }

  /* 获取用户类型-筛选框 */
  getUserTypeList = async () => {
    const res = await fetchUserTypeList({ current: 1, size: 999999 });
    this.setState({
      userList: res.records ? res.records : [],
    })
  }

  /* 分页 */
  changePagination = (current, size) => {
    this.setState({ current, size }, () => {
      this.getTableData();
    })
  }

  /* 条件查询 */
  searchByParams = () => {
    const info = this.props.form.getFieldsValue();
    this.setState({
      current: 1,
      userTypeId: info.userTypeId ? info.userTypeId : '',
      labelName: info.labelName ? info.labelName : ''
    }, () => {
      this.getTableData();
    })
  }

  /* 打开编辑框 */
  openBottomModal = row => {
    this.EditBottomModal.openInit(row)
  }

  /* 是否删除标签 */
  isDelete = id => {
    const that = this;
    Modal.confirm({
      title: formatMessage({ id: 'digitalEmployees.bottomLabel.confirmDeleteTitle' }),
      okText: formatMessage({ id: 'digitalEmployees.bottomLabel.confirm' }),
      okType: 'danger',
      cancelText: formatMessage({ id: 'digitalEmployees.bottomLabel.cancel' }),
      onOk() {
        that.deleteBottomLabel(id);
      },
    })
  }

  /* 删除标签 */
  deleteBottomLabel = async id => {
    const res = await bottomRemove({ id })
    const { list, current } = this.state;
    if (list.length === 1 && current > 1) {
      this.setState({ current: current - 1 }, () => {
        this.getTableData();
      })
    } else {
      this.getTableData();
    };
    message.info(res.msg);
  }

  /** 上下移 */
  movePosition = async (row,index,flag) => {
    const { list } = this.state;
    const { applicationId } = this.props;
    let type = flag === 'up' ? 1 : 2
    const res = await bottomMove({id:row.id,applicationId,type})
    message.info(res.msg);
    this.getTableData()
  }

  render() {
    const { getFieldDecorator } = this.props.form
    const { list, loading, current, total, userList,size } = this.state;
    const { applicationId } = this.props;
    const renderType = type => {
      let txt = ''
      switch (type) {
        case 1:
          txt = formatMessage({ id: 'digitalEmployees.bottomLabel.qaType' });
          break;
        case 3:
          txt = formatMessage({ id: 'digitalEmployees.bottomLabel.multiTurnType' });
          break;
        case 2:
          txt = formatMessage({ id: 'digitalEmployees.bottomLabel.mindMapType' });
          break;
        case 4:
          txt = formatMessage({ id: 'digitalEmployees.bottomLabel.formType' });
          break;
      }
      return txt
    }
    const columns = [
      {
        title: formatMessage({ id: 'digitalEmployees.bottomLabel.tagName' }),
      dataIndex: 'labelName',
      width: 150,
      },
      // {
      //   title: '对应知识点',
      //   dataIndex: 'relQaName',
      //   width: 300,
      //   render: (relQaName, row) => {
      //     return (
      //       <div className={styles.bottomRelatedBox}>
      //         <div className={styles.bottomRelatedType}>{renderType(row.relQaType)}</div>
      //         <div className={styles.bottomRelatedQuestion}>{relQaName}</div>
      //       </div>
      //     )
      //   }
      // },
      {
        title: formatMessage({ id: 'digitalEmployees.bottomLabel.isDefaultLabel' }),
      dataIndex: 'defaultLabel',
      width: 150,
      render: isDefault => {
          return isDefault === 1 ? formatMessage({ id: 'digitalEmployees.bottomLabel.yes' }) : formatMessage({ id: 'digitalEmployees.bottomLabel.no' })
        }
      },
      {
        title: formatMessage({ id: 'digitalEmployees.bottomLabel.relatedLabels' }),
      dataIndex: 'relLabelName',
      width: 200,
      render: (referLabel) => {
          const list = referLabel ? referLabel.split(',') : [];
          return <div className={styles.referTypeBox}>
            {
              list.map((item, index) => {
                return <div key={index} className={styles.referTypeItem}>{item}</div>
              })
            }
          </div>
        }
      },
      {
        title: formatMessage({ id: 'digitalEmployees.bottomLabel.applicableUserTypes' }),
      dataIndex: 'userTypeName',
      width: 250,
      render: (userTypeName) => {
          const list = userTypeName.split(',');
          return <div className={styles.userTypeBox}>
            {
              list.map((item, index) => {
                return <div key={index} className={styles.userTypeItem}>{item}</div>
              })
            }
          </div>
        }
      },
      {
        title: formatMessage({ id: 'digitalEmployees.bottomLabel.actions' }),
      width: 350,
      render: (text, row, index) => {
          return (
            <div>
              <Button
                size={'small'} type={'primary'} icon={'edit'} style={{ marginRight: 4 }}
                onClick={() => this.openBottomModal(row)}
              > {formatMessage({ id: 'digitalEmployees.bottomLabel.edit' })}
              </Button>
              <Button
                size={'small'} type={'primary'} icon={'delete'} style={{ background: '#E8313B', borderColor: '#E8313B',marginRight: 4 }}
                onClick={() => this.isDelete(row.id)}>
               {formatMessage({ id: 'digitalEmployees.bottomLabel.delete' })}
              </Button>
              <Button
								style={{ marginRight: 4 ,background:current == 1 && index == 0 ? '#BFBFBF' : '#556FB5',color:"#ffffff"}}
								onClick={() => this.movePosition(row,index,'up')}
								disabled={current == 1 && index == 0}
                icon="arrow-up"
                size="small"
							>
								{formatMessage({ id: 'digitalEmployees.bottomLabel.moveUp' })}
							</Button>
							<Button
                style={{ marginRight: 4 ,background:((current-1)*size + index + 1) == total ? '#BFBFBF' : '#8395FB',color:"#ffffff"}}
								onClick={() => this.movePosition(row,index,'down')}
								disabled={((current-1)*size + index + 1) == total}
                icon="arrow-down"
                size="small"
							>
								{formatMessage({ id: 'digitalEmployees.bottomLabel.moveDown' })}
							</Button>
            </div>
          );
        },
      },
    ];

    return (
      <div>
        <Row style={{ marginBottom: 20 }}>
          <Col span={16}>
            <Form layout="inline">
              <Form.Item label={formatMessage({ id: 'digitalEmployees.bottomLabel.categoryLabel' })}>
                {getFieldDecorator('labelName')(<Input.Search placeholder={formatMessage({ id: 'digitalEmployees.bottomLabel.pleaseEnter' })} onSearch={this.searchByParams} />)}
              </Form.Item>
              <Form.Item label={formatMessage({ id: 'digitalEmployees.bottomLabel.userType' })}>
                {getFieldDecorator('userTypeId', { initialValue: '' })(
                  <Select style={{ width: 200 }}>
                    <Select.Option value={''}>{formatMessage({ id: 'digitalEmployees.bottomLabel.defaultType' })}</Select.Option>
                    {
                      userList.map((item, index) => {
                        return <Select.Option value={item.id} key={item.id}>{item.tagName}</Select.Option>
                      })
                    }
                  </Select>
                )}
              </Form.Item>
              <Form.Item>
                <Button type={'primary'} onClick={this.searchByParams}>{formatMessage({ id: 'digitalEmployees.bottomLabel.search' })}</Button>
              </Form.Item>
            </Form>
          </Col>
          <Col span={8} style={{ textAlign: 'right' }}>
            <Button type={'primary'} onClick={() => this.openBottomModal()}>{formatMessage({ id: 'digitalEmployees.bottomLabel.add' })}</Button>
            {/* <div style={{fontSize:'13px',color:"rgba(51, 51, 51, 0.5)",marginTop:10}}>{formatMessage({ id: 'digitalEmployees.bottomLabel.configInvalidTip' })}</div> */}
          </Col>
        </Row>

        <Table
          rowKey={'id'}
          columns={columns}
          dataSource={list}
          loading={loading}
          pagination={false}
          scroll={{ x: 1300, y: 470 }}
        />
        {total > 10 ? (
          <Pagination
            style={{ textAlign: 'right', marginTop: 16 }}
            total={total}
            current={current}
            onChange={this.changePagination}
            // showSizeChanger={true}
            showQuickJumper={true}
            // onShowSizeChange={this.changePagination}
          />
        ) : null}

        <EditBottomModal
          onRef={ref => this.EditBottomModal = ref}
          userList={userList}
          applicationId={applicationId}
          refreshTableList={this.getTableData}
        />
      </div>
    );
  }
}

export default Form.create()(BottomLabel)
